<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8"/>
    <title>用户注册</title>
    <link rel="stylesheet" href="/css/abchat.css"/>
    <link rel="stylesheet" href="/css/bootstrap.css"/>
    <link rel="icon" type="image/x-icon" href="/image/favicon.ico"/>
</head>
<body class="register">
<div class="container">
    <form class="form-signin" onsubmit="return false;" >
        <h3 class="form-signin-heading">ABChat | 注册</h3>
        <div class="form-group">
            <div class="form-label">
                <label for="username">用户名</label>
                <label class="form-message hidden"></label>
            </div>
            <input type="text" id="username" class="form-control" placeholder="字母 / 数字 / 下划线" required="true" autofocus="true"/>
        </div>
        <div class="form-group">
            <div class="form-label">
                <label for="email">邮箱地址</label>
                <label class="form-message hidden"></label>
            </div>
            <input type="email" id="email" class="form-control" placeholder="abc@abchat.com" required="true"/>
        </div>
        <div class="form-group">
            <div class="form-label">
                <label for="password">密码</label>
                <label class="form-message hidden"></label>
            </div>
            <input type="password" id="password" class="form-control" placeholder="8-18位" required="true"/>
        </div>
        <div class="form-group">
            <div class="form-label">
                <label for="repassword">重复密码</label>
                <label class="form-message hidden"></label>
            </div>
            <input type="password" id="repassword" class="form-control" required="true"/>
        </div>
        <button class="btn btn-lg btn-primary btn-block submit-btn" type="submit">注册</button>
    </form>
</div>
<script th:src="@{/js/jquery-3.2.1.js}"></script>
<script th:src="@{/js/bootstrap.js}"></script>
<script th:src="@{/js/http.js}"></script>
<script th:src="@{/js/abchat.js}"></script>
<script th:inline="javascript">
    $('.submit-btn').on("click",function () {
        var text = "不能为空";
        var usernmame = $('#username').val().trim();
        var email = $('#email').val().trim();
        var password = $('#password').val().trim();
        var repassword = $('#repassword').val().trim();

        if (usernmame == ""){
            checkForm($('#username'),text);
            return false;
        }

        if (email == ""){
            checkForm($('#email'),text);
            return false;
        }

        if (password == ""){
            checkForm($('#password'),text);
            return false;
        }

        if (repassword == ""){
            checkForm($('#repassword'),text);
            return false;
        }

        if (password != repassword){
            var $parent = $('#repassword').parent();
            var $message = $parent.find('.form-message');
            $message.text("重复密码不一致");
            $message.removeClass("hidden");
            $('#repassword').focus();
            setInputColor($parent,true);
            return false;
        }

        var data = {
            "username" : usernmame,
            "password" : password,
            "email" : email
        };
        httpPost(httpURL+"/auth/register",data,function (data) {
            if (data.code == 200){
                window.location.href = "/page/message/register";
            }else{
                var $parent = $('#username').parent();
                var $message = $parent.find('.form-message');
                $message.text(data.payload);
                $message.removeClass("hidden");
                return false;
            }
        })

    });
    $('#username, #email, #password, #repassword').on("keyup",function () {
        if ( $(this).val().trim() != ""){
            errorDisplay( $(this));
        }
    });
    $('#username').on("change",function () {
        // 进行用户名是否被注册检测
        var username = $(this).val().trim();
        if (username == ""){
            checkForm($(this),"不能为空");
            return false;
        }
        if (!regUsername.test(username)){
            checkForm($(this),"格式或长度(6-20)错误");
            return false;
        }

        httpGet(httpURL + "/auth/check/username/"+username,function (data) {
            if (data.code != 200){
                var $parent = $('#username').parent();
                var $message = $parent.find('.form-message');
                $message.text(data.payload);
                $message.removeClass("hidden");
                setInputColor($parent,true);
            }
        });


    });
    $('#email').on("change",function () {
        // 进行用户名是否被注册检测
        var email = $(this).val().trim();
        if (email == ""){
            checkForm($(this),"不能为空");
            return false;
        }
        if (!regEmail.test(email)){
            checkForm($(this),"格式错误");
            return false;
        }

        httpGet(httpURL + "/auth/check/email?email="+email,function (data) {
            if (data.code != 200){
                var $parent = $('#email').parent();
                var $message = $parent.find('.form-message');
                $message.text(data.payload);
                $message.removeClass("hidden");
                setInputColor($parent,true);
            }
        });


    });
    $('#password,#repassword').on("change",function () {
        var password = $(this).val().trim();
        if (password == ""){
            checkForm($(this),"不能为空");
            return false;
        }
        if (!regPassword.test(password)){
            checkForm($(this),"格式错误");
            return false;
        }
        //判断重复密码是否一致
        if($(this).attr('id') == 'repassword'){
            if (password != $('#password').val().trim()){
                var $parent = $('#repassword').parent();
                var $message = $parent.find('.form-message');
                $message.text("重复密码不一致");
                $message.removeClass("hidden");
                $('#repassword').focus();
                setInputColor($parent,true);
                return false;
            }
        }
    });
</script>
</body>
</html>